<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    

    <title> Gallery with Visible Nearby Images | RoyalSlider Example</title>

    <meta content="Touch-enabled image gallery and content slider plugin, that focuses on providing great user experience on every desktop and mobile device." name="description">
    <meta name="keywords" content="content slider, gallery, plugin, jquery, banner rotator">
    <meta name="viewport" content="width = device-width, initial-scale = 1.0" />
    <meta name="author" content="Dmitry Semenov">

    <!-- slider JS files -->
    
    <link href="../royalslider/royalslider.css" rel="stylesheet">
    <script  src="../royalslider/jquery-1.8.0.min.js"></script>
    <script src="../royalslider/jquery.royalslider.min.js"></script>
    
    

    
    <!-- syntax highlighter -->
    <script src="../preview-assets/js/highlight.pack.js"></script>
    <script src="../preview-assets/js/jquery-ui-1.8.22.custom.min.js"></script>
    <script> hljs.initHighlightingOnLoad();</script>


    

    <!-- preview-related stylesheets -->
    <link href="../preview-assets/css/reset.css" rel="stylesheet">
    <link href="../preview-assets/css/grid.css" rel="stylesheet">
    <link href="../preview-assets/css/smoothness/jquery-ui-1.8.22.custom.css" rel="stylesheet">
    <link href="../preview-assets/css/github.css" rel="stylesheet">

    <!-- slider stylesheets -->
    
     
        <link href="../royalslider/default/rs-default.css" rel="stylesheet">
     
    

    <link href="../preview-assets/css/main.css" rel="stylesheet">

    
    <!-- slider css -->
    <style>
      #gallery-1 {
  width: 50%;
  margin: 24px 25% 66px;
  color: #FFF;
}
.visibleNearby {
  background: #141414;
  width: 100%;
  overflow: hidden;
}
.visibleNearby .rsGCaption {
  margin-top: 12px;
  font-size: 16px;
  line-height: 18px;
  padding-bottom: 16px;
}
.visibleNearby .rsGCaption span {
  display: block;
  clear: both;
  color: #bbb;
  font-size: 14px;
  line-height: 22px;
}
.visibleNearby .rsOverflow,
.visibleNearby .rsSlide {
  background: none;
}
.visibleNearby .rsOverflow {
  overflow: visible;
}


/* Scaling transforms */
.visibleNearby .rsSlide img {
  opacity: 0.45;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;

  -webkit-transform: scale(0.9);  
  -moz-transform: scale(0.9); 
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
}
.visibleNearby .rsActiveSlide img {
  opacity: 1;
  -webkit-transform: scale(1);  
  -moz-transform: scale(1); 
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

/* Non-linear resizing on smaller screens */
@media screen and (min-width: 0px) and (max-width: 900px) { 
   #gallery-1 {
    width: 62%;
    margin-left: 19%;
    padding: 12px 0 12px;
    color: #FFF;
  }
  #gallery-1 .rsOverflow,
  .royalSlider#gallery-1 {
    height: 400px !important;
  }
}
@media screen and (min-width: 0px) and (max-width: 500px) { 
  #gallery-1 .rsOverflow,
  .royalSlider#gallery-1 {
    height: 300px !important;
  }
}

    </style>
    
  </head>
  <body >
  <header  id="main-header" class="clearfix">  
    <div  class="page wrapper"> 
       <div class="col span_6">
         <a id="logo" href="#">Royal&thinsp;Slider</a>
         <nav>
            <a href="http://dimsemenov.com/plugins/royal-slider/documentation/?s=dp">Documentation Online</a>
            <a href="http://dimsemenov.com/plugins/royal-slider/build/?s=dp">Build Tool</a>
         </nav>
       </div>
    </div>
  </header>
  <div  class="page wrapper">    
    <div class="row clearfix">
      <div id="page-navigation" class="col span_6"> 
            
          <div class="left page-nav-item"> 
                  <a href="../animated-blocks/" title="Previous Example: 
  Slider with Animated Blocks">← Slider with Animated Blocks</a> 
          </div> 
           
           
          <div class="right page-nav-item"> 
          
                  <a href="../gallery/" title="Next Example: 
  Image Gallery with Fullscreen Option">Image Gallery with Fullscreen Option → </a> 
          
          </div> 
           
      </div> 
    </div>

    <!-- slider code start -->
      </div>

<div class="sliderContainer visibleNearby fullWidth clearfix royalSlider-preview">
  <div id="gallery-1" class="royalSlider rsDefault">
    <a class="rsImg"  data-rsDelay="1000"  href="../img/paintings/700x500/1.jpg">Still Life: Vase with Twelve Sunflowers<span>Vincent van Gogh</span></a>
    <a class="rsImg" href="../img/paintings/700x500/3.jpg">Mona Lisa<span>Leonardo da Vinci</span></a>
    <a class="rsImg" href="../img/paintings/700x500/4.jpg">American Gothic<span>Grant DeVolson Wood</span></a>
    <a class="rsImg" href="../img/paintings/700x500/5.jpg">The Night Watch<span>Rembrandt</span></a>
    <a class="rsImg" href="../img/paintings/700x500/2.jpg" data-rsVideo="https://vimeo.com/44878206">The Starry Night (with video)<span>Vincent van Gogh</span></a>
    <a class="rsImg" href="../img/paintings/700x500/6.jpg">Girl with a Pearl Earring<span>Johannes Vermeer</span></a>
    <a class="rsImg" href="../img/paintings/700x500/7.jpg">Card Players<span>Paul Cezanne</span></a>
    <a class="rsImg" href="../img/paintings/700x500/8.jpg">Reply of the Zaporozhian Cossacks<span>Ilya Repin</span></a>
    <a class="rsImg" href="../img/paintings/700x500/9.jpg">Chesmabattle<span>Ivan Aivazovsky</span></a>
    <a class="rsImg" href="../img/paintings/700x500/10.jpg">The Kiss<span>Gustav Klimt</span></a>
    <a class="rsImg" href="../img/paintings/700x500/11.jpg">Morning in a Pine Forest<span>Ivan Shishkin</span></a>
  </div>
</div>

<div class="page wrapper">  
  <div class="row clearfix">
    <div class="col span_4 logo_shift" style="margin-top: 24px;">
      <h1>Gallery with Visible Nearby Images</h1>
      <p>You may easily remove all these zoom and fade effects and can put any HTML inside each slide or add thumbnails. Also, you can make this one vertical, or disable looping.</p>
      <p>Video can be added to each slide if required, like it's done on <a href="#" class="slide4link">fifth slide</a>.</p>
      <p>Animated zoom and fade animation is applied only in CSS3-supported browsers.</p>
      <p>Non-linear scaling technique is used. When width less then 700px height of gallery is forced to be 400px. Naturally, you can modify this.</p>
    </div>
  </div>

  <!-- You don't need this part of code -->
  <div class="row clearfix">
    <div class="tabs col span_6">
    <ul>
        <li><a href="#js">JavaScript</a></li>
        <li><a href="#css">CSS</a></li>
        <li><a href="#html">HTML</a></li>
    </ul>
    <div id="js"><pre><code></code></pre></div>
    <div id="css"><pre><code>#gallery-1 {
  width: 50%;
  margin: 24px 25% 66px;
  color: #FFF;
}
.visibleNearby {
  background: #141414;
  width: 100%;
  overflow: hidden;
}
.visibleNearby .rsGCaption {
  margin-top: 12px;
  font-size: 16px;
  line-height: 18px;
  padding-bottom: 16px;
}
.visibleNearby .rsGCaption span {
  display: block;
  clear: both;
  color: #bbb;
  font-size: 14px;
  line-height: 22px;
}
.visibleNearby .rsOverflow,
.visibleNearby .rsSlide {
  background: none;
}
.visibleNearby .rsOverflow {
  overflow: visible;
}


/* Scaling transforms */
.visibleNearby .rsSlide img {
  opacity: 0.45;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;

  -webkit-transform: scale(0.9);  
  -moz-transform: scale(0.9); 
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
}
.visibleNearby .rsActiveSlide img {
  opacity: 1;
  -webkit-transform: scale(1);  
  -moz-transform: scale(1); 
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

/* Non-linear resizing on smaller screens */
@media screen and (min-width: 0px) and (max-width: 900px) { 
   #gallery-1 {
    width: 62%;
    margin-left: 19%;
    padding: 12px 0 12px;
    color: #FFF;
  }
  #gallery-1 .rsOverflow,
  .royalSlider#gallery-1 {
    height: 400px !important;
  }
}
@media screen and (min-width: 0px) and (max-width: 500px) { 
  #gallery-1 .rsOverflow,
  .royalSlider#gallery-1 {
    height: 300px !important;
  }
}
</code></pre></div>
    <div id="html"><pre id="html-code"><code></code></pre></div>
    </div>
  </div>
  <script>
    jQuery(document).ready(function(e) {
        var code = $('#html-code code');
        if(code.is(':empty')) {
          var rsCode = $('.royalSlider-preview');
          if(!rsCode.length) {
              rsCode = $('.royalSlider');
          }
          rsCode = rsCode.clone().removeClass('royalSlider-preview').wrap('<div></div>').parent().html();
          rsCode = htmlencode(rsCode);
          code.html(rsCode);
        }
        $('#js code').html( htmlencode($('#addJS').html()) );
        $( ".tabs" ).tabs();
    });
    function htmlencode(str) {
      if(str) {
         return str.replace(/[&<>"']/g, function($0) {
            return "&" + {"&":"amp", "<":"lt", ">":"gt", '"':"quot", "'":"#39"}[$0] + ";";
        });
      }
    }   
  </script>
  <div class="row clearfix">
    <h2>List of Starter Templates</h2>
  <ul id="templates-list" class="col span_6">
  
  <li><a href="../content-slider/"><img width="341" height="250" src="../img/previews/content-slider.jpg" /><h3>HTML Content Slider</h3></a></li>
  
  <li><a href="../video-gallery/"><img width="341" height="250" src="../img/previews/video-gallery.jpg" /><h3>Video Gallery</h3></a></li>
  
  <li><a href="../gallery/"><img width="341" height="250" src="../img/previews/gallery.jpg" /><h3>Image Gallery with Fullscreen Option</h3></a></li>
  
  <li><a href="../visible-nearby/"><img width="341" height="250" src="../img/previews/visible-nearby.jpg" /><h3>Gallery with Visible Nearby Images</h3></a></li>
  
  <li><a href="../animated-blocks/"><img width="341" height="250" src="../img/previews/animated-blocks.jpg" /><h3>Slider with Animated Blocks</h3></a></li>
  
  <li><a href="../full-width/"><img width="341" height="250" src="../img/previews/fullwidth.jpg" /><h3>Full Width Slider</h3></a></li>
  
  <li><a href="../slider-in-lightbox/"><img width="341" height="250" src="../img/previews/lightbox.jpg" /><h3>Slider in Lightbox</h3></a></li>
  
  <li><a href="../simple-vertical/"><img width="341" height="250" src="../img/previews/simple-vertical.jpg" /><h3>Simple Vertical Slider</h3></a></li>
  
  <li><a href="../gallery-vertical-fade/"><img width="341" height="250" src="../img/previews/gallery-fade.jpg" /><h3>Gallery with Fade and Vertical Thumbs</h3></a></li>
  
  <li><a href="../slider-in-laptop/"><img width="341" height="250" src="../img/previews/slider-in-laptop.jpg" /><h3>Slider in Laptop</h3></a></li>
  
  <li><a href="../gallery-with-deeplinking/"><img width="341" height="250" src="../img/previews/deeplinking.jpg" /><h3>Gallery with Deep Linking</h3></a></li>
  
  </ul>
</div>
  <footer class="row clearfix" id="main-footer">
    <div class="col span_6">
      <nav><a href="http://dimsemenov.com/subscribe.html?s=sb">Email Newsletter</a><a href="http://twitter.com/dimsemenov">Twitter</a><a href="mailto:diiiimaaaa@gmail.com?subject=RoyalSlider bug">Report Bug</a><a href="http://dimsemenov.com/plugins/royal-slider/support/">Contact support</a></nav>
      <p class="copy">© 2011-2012 <a href="http://dimsemenov.com">Dmitry Semenov</a></p>
    </div>
  </footer>
   <!-- tabs & footer end /// --> 
   
  
    <script id="addJS">jQuery(document).ready(function($) {
  var si = $('#gallery-1').royalSlider({
    addActiveClass: true,
    arrowsNav: false,
    controlNavigation: 'none',
    autoScaleSlider: true, 
    autoScaleSliderWidth: 960,     
    autoScaleSliderHeight: 650,
    loop: true,
    fadeinLoadedSlide: false,
    globalCaption: true,
    keyboardNavEnabled: true
  }).data('royalSlider');

  // link to fifth slide from slider description.
  $('.slide4link').click(function(e) {
    si.goTo(4);
    return false;
  });
});
</script>
  
  </div>
  </body>
</html>
